<template>
  <a-modal
    :visible="state.visible"
    :title="state.editDetail?.id ? '修改' : '添加'"
    @cancel="onClose"
  >
    <a-form :model="formData" ref="formRef">
      <a-form-item
        label="关键词"
        :rules="[
          { required: true, message: '关键词不能为空!' },
          { min: 2, max: 20, message: '字数为2-20个字符' },
        ]"
        name="content"
      >
        <a-input
          v-model:value="formData.content"
          placeholder="请输入关键词，建议2-20个字"
        ></a-input>
      </a-form-item>
    </a-form>
    <template #footer>
      <a-space>
        <a-button
          type="primary"
          @click="submitHandle"
          :loading="state.submitLoading"
          >确定</a-button
        >
      </a-space>
    </template>
  </a-modal>
</template>

<script setup>
import { message } from "ant-design-vue";
import { reactive, ref, defineEmits } from "vue";
import request from "@/common/utils/request";
const state = reactive({
  visible: false,
  tableId: null,
  submitLoading: false,
  KeywordDetail: null, //词库详情
  editDetail: null, //修改回显详情
});
const emit = defineEmits(["success"]);
const formData = ref({
  content: "",
});
// 初始化数据
const initData = () => {
  state.editId = null;
  state.tableId = null;
  formRef.value && formRef.value.resetFields();
  state.editDetail = null;
};
const showModal = (info) => {
  state.visible = true;
  state.KeywordDetail = info.KeywordDetail;
  if (info.editDetail) {
    state.editDetail = info.editDetail;
    formData.value.content = info.editDetail.merge_keyword;
  }
};
const onClose = () => {
  state.visible = false;
  initData();
};
let formRef = ref(null); //表单实例
const submitHandle = () => {
  formRef.value &&
    formRef.value.validate().then(() => {
      if (formData.value.content.trim().length <= 0) {
        return message.warning("关键词内容不能为空");
      }
      state.submitLoading = true;
      let params = {
        content: formData.value.content.trim(), //长尾关键词内容
        ai_keyword_id: state.KeywordDetail.id,
      };
      if (state.editDetail && state.editDetail.id) {
        params.id = state.editDetail.id;
        request
          .put("/work_ai", "/user/filmrelease/ai/keywordMerge/update", params)
          .then((successRes) => {
            console.log(successRes);
            state.submitLoading = false;
            state.visible = false;
            if (successRes && successRes.result) {
              emit("success");
              initData();
              message.success("修改成功");
            }
          })
          .catch((errorRes) => {
            state.submitLoading = false;
          });
      } else {
        request
          .post("/work_ai", "/user/filmrelease/ai/keywordMerge/add", params)
          .then((successRes) => {
            console.log(successRes);
            state.submitLoading = false;
            state.visible = false;
            if (successRes && successRes.result) {
              emit("success");
              initData();
              message.success("添加成功");
            }
          })
          .catch((errorRes) => {
            state.submitLoading = false;
          });
      }
    });
};
defineExpose({
  showModal,
});
</script>

<style lang="less" scoped></style>
